<template>
  <div id="app">
    <!-- <div v-for="(item,index) in list" :key="index">
          <span>{{item.title}}</span>
          <div v-for="(ite,ind) in item.children" :key="ind">
              <span>{{ite.title}}</span>
              <div v-for="(item1,index1) in ite.children" :key="index1">
                 <span>{{item1.title}}</span>
                 <div v-for="(item2,index2) in item1.children" :key="index2">
                    <span> {{item2.title}}</span>
                 </div>
              </div>
          </div>
      </div> -->
    <!-- <Digui :list="list"></Digui>
    <Son></Son>
    <div class="rem1"></div> -->
    <input type="text" v-model="keyword" @input="fn1" />
    <div>
      <p v-for="(item, index) in newArr" :key="index">
        {{ item.name }}
      </p>
    </div>
    <hr />

    <!-- <div v-for="item in arr" :key="item.id">
        {{item.name}}
    </div> -->
  </div>
</template>


<script>
import Digui from "./components/digui.vue";
import Son from "./components/son.vue";
import {debounce} from "../src/util/debonce.js"
export default {
  data() {
    return {
      list: [
        {
          title: "山西",
          children: [
            {
              title: "太原",
              children: [
                {
                  title: "小店",
                  children: [
                    {
                      title: "大营盘镇",
                    },
                    {
                      title: "太原南站",
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          title: "北京",
          children: [
            {
              title: "昌平",
              children: [
                {
                  title: "沙河",
                  children: [
                    {
                      title: "于辛庄",
                    },
                    {
                      title: "松兰堡",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      arr: [],
      keyword: "",
      newArr: [],
      timmer:null //是延时器的名字
    };
  },
  components: {
    Digui,
    Son,
  },
  mounted() {
    this.$axios.get("/list").then((res) => {
      console.log(res.data);
      this.arr = res.data;
    });
  },
  beforeDestroy(){
      // 合理释放内存
      this.timmer =null
  },
  methods: {
    fn() {
      // 思路，先判断input框里面有没有值，没有值直接返回一个空数组
      if (this.keyword) {
        clearTimeout(this.timmer) // 每次按键盘都在执行fn函数，一按键盘就把延时器清除了
        timmer = setTimeout(() => { // 不按键盘了，执行最后一次keyup事件顺序执行了以下代码筛选出了结果
             this.newArr = this.arr.filter((item, index) => {
            return item.name.includes(this.keyword);
        });
        }, 1500);
      }
      else {
        // input框里面有没有值，没有值直接返回一个空数组
        this.newArr = [];
      }
    },
    fn1:debounce(2000,function(){
         if (this.keyword) {
        // clearTimeout(this.timmer) // 每次按键盘都在执行fn函数，一按键盘就把延时器清除了
        // timmer = setTimeout(() => { // 不按键盘了，执行最后一次keyup事件顺序执行了以下代码筛选出了结果
             this.newArr = this.arr.filter((item, index) => {
            return item.name.includes(this.keyword);
        });
        // }, 1500);
      }
      else {
        // input框里面有没有值，没有值直接返回一个空数组
        this.newArr = [];
      }
    })
   
  },
};
</script>








<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
  width: 1rem;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.rem1 {
  width: 1rem;
  height: 0.5rem;
  background: #000;
}
</style>
